import React from "react";

export default class App extends React.Component {
  // 初始化 state 数据
  state = {
    curProfession: "数学家", // 用于表示当前选择
    people: [
      {
        id: 0,
        name: "凯瑟琳·约翰逊",
        profession: "数学家",
      },
      {
        id: 1,
        name: "马里奥·莫利纳",
        profession: "化学家",
      },
      {
        id: 2,
        name: "穆罕默德·阿卜杜勒·萨拉姆",
        profession: "物理学家",
      },
      {
        name: "珀西·莱温·朱利亚",
        profession: "化学家",
      },
      {
        name: "苏布拉马尼扬·钱德拉塞卡",
        profession: "天体物理学家",
      },
    ],
  };

  handleChange(event) {
    console.log("event", event.target.value);
    const value = event.target.value;
    this.setState({ curProfession: value });
  }

  render() {
    // 解构 state 中的数据
    const { people, curProfession } = this.state;
    return (
      <div>
        <select
          value={curProfession}
          onChange={(event) => this.handleChange(event)}
        >
          <option value={""}>请选择</option>
          <option value={"数学家"}>数学家</option>
          <option value={"化学家"}>化学家</option>
          <option value={"物理学家"}>物理学家</option>
          <option value={"天体物理学家"}>天体物理学家</option>
        </select>

        <ul>
          {people
            .filter((item) => item.profession.includes(curProfession))
            .map((item, index) => (
              <li key={index}>
                {item.name} - {item.profession}
              </li>
            ))}
        </ul>
      </div>
    );
  }
}
